.Dialog {
  padding: 0;
  text-align: start;

  --dialog-margin-horizontal: 32px;
  --dialog-margin-vertical: 24px;
  --dialog-gap: 24px;
}

.Dialog__element {
  top: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  padding-top: var(--dialog-margin-vertical);
  border: solid 1px var(--modal-border);
  border-radius: 10px;
  background: var(--modal-background);
  color: var(--text-default);
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 500ms,
    transform 500ms;
  max-width: min(700px, 85vw);
  max-height: 95vh;

  /* remove padding top when there's a header element, it has its own padding */
  &:has(.Dialog__header) {
    padding-top: 0px;
  }

  & img {
    max-width: 100%;
  }
}
.Dialog__element::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.Dialog__element:popover-open,
.Dialog__element[open] {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0px 0px 0px 100vmax var(--modal-backdrop);
}

.Dialog__header {
  display: flex;
  z-index: 2;
  padding-bottom: var(--dialog-gap);
}

.Dialog__headerTitle {
  flex: 100% 1 1;
  padding: var(--dialog-margin-vertical) 16px 0 var(--dialog-margin-horizontal);
  font-size: var(--text-xl);
  margin: var(--space-lg) 0 0;
  text-align: start;
}

.Dialog__Close {
  padding: 0 var(--dialog-margin-horizontal) 0 0;
  z-index: 3;
}

.Dialog__Close,
.Dialog__header {
  position: sticky;
  top: 0px;
  background: var(--modal-background);
}

.Dialog__CloseButton {
  border: none;
  margin: calc(-1 * var(--space-xs));
  padding: var(--space-xs);
  border-radius: var(--space-xs);
  background: none;
  color: var(--text-default);
  cursor: pointer;
  transition: 250ms color;
  position: absolute;
  right: var(--space-lg);
  top: var(--space-md);
}

.Dialog__CloseButton:focus-visible {
  outline: none;
  box-shadow: var(--accent) 0 0 0 2px inset;
}

.Dialog__CloseButton:hover {
  color: var(--text-hover);
}

.Dialog__CloseButton:active {
  color: var(--accent);
}

.Dialog__CloseIcon {
  font-size: var(--text-lg);
}

.Dialog__content {
  padding: 0 var(--dialog-margin-horizontal) var(--dialog-gap);
}

.Dialog__footer {
  display: flex;
  gap: 16px;
  justify-content: end;
  padding-top: var(--space-md);
}
